<!-- 
 * 示例管理说明标题
 * @author: 
 * @since: 2022-05-11
 * index.vue
-->
<template>
  <div class="exampleExplain-container"></div>
  <router-view v-show="routerCutLevel === 3" class="detailsPage"></router-view>
  <div v-show="routerCutLevel === 2" class="listPage">
    <div class="search">
      <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter"></Filters>
    </div>
    <div class="table">
      <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :btnData="state.btnData" @getCurrentChange="getCurrentChange" @comEvent="comEvent" @colSelect="colSelect" @refresh="getExampleExplainList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="140">
        <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
      </TableCom>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, computed } from 'vue'
import { getExampleExplainTitleListApi, exampleTitleBatchApi } from '@/api/interface/exampleExplain.js'
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { successHandle, colFilters, tableIsEnable, batchHandle } from '@/utils/common.js'
const store = useStore();

const router = useRouter();

const state = reactive({
  formModel: {//示例说明管理搜索列表的参数
    sampleTitle: '',//示例说明标题
  },
  formLabel: [
    {
      label: '示例说明标题',
      model: "sampleTitle",
      type: "text",
      width: '160',
      placeholder: '请输入示例说明标题',
    },
  ],
  tableData: [
  ],
  tableHeader: [
    {
      label: '示例说明标题',
      prop: "sampleTitle",
    },
    {
      label: '标题说明',
      prop: "sampleTitleExplain",
    },
    {
      label: '示例说明状态',
      prop: "valid",
      status: true
    },
  ],
  btnData: [
    {
      name: '编辑',
      icon: 'bianji',
      color: '#25D390',
      change: 'edit'
    },
    {
      name: '是否启用',
      isStart: true,
      prop: 'valid',
      change: 'enable'
    },
  ],
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0,
  },
  selectTableId: [],//选择表格数据
  isBatchStart: true,//是否批量启用禁用

})

//区域加载
const loading = ref(true)
//示例说明管理模块功能按钮
const btnList = reactive([
  {
    name: '批量启用',
    icon: 'qiyong',
    bgColor: '#00A2FF'
  },
  {
    name: '批量禁用',
    icon: 'forbid',
    bgColor: '#FFB018'
  },
])

onMounted(() => {
  getExampleExplainList()
})

const routerCutLevel = computed(() => {
  return store.getters['setting/routerCutLevel'];
});

//获取示例说明标题列表
const getExampleExplainList = () => {
  const params = {
    sampleTitle: state.formModel.sampleTitle,
    ipi: state.pagination.currentPage,
    ips: state.pagination.size
  }
  loading.value = true;
  getExampleExplainTitleListApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      loading.value = false
      state.tableData = data.result
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize
      state.pagination.total = data.total
    }


  })


}
//示例项标题启用禁用
const exampleTitleBatch = (type) => {
  const params = {
    id: state.selectTableId,
    type: type
  }
  exampleTitleBatchApi(params).then(res => {
    successHandle(res)
    getExampleExplainList()
  })
}
//点击示例说明标题操作按钮
const clickHandle = (index) => {
  switch (index) {
    case 0://批量启用
      state.isBatchStart = true
      batchHandle(state.selectTableId, 'START', () => {
        exampleTitleBatch('start')
      })
      break;
    case 1://批量禁用
      state.isBatchStart = false
      batchHandle(state.selectTableId, 'STOP', () => {
        exampleTitleBatch('stop')
      })
      break;

  }
}



//搜索
const filter = () => {
  getExampleExplainList()

}
//重置
const reset = () => {
  for (let key in state.formModel) {
    state.formModel[key] = ''
  }
  getExampleExplainList()
}
//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getExampleExplainList()
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val;
  getExampleExplainList()
}

//表格中的操作
const comEvent = (type, data) => {
  switch (type) {
    case 'edit':
      router.push({ name: 'ExampleExplainItem', params: data }).catch(() => { });
      break;
    case 'enable':
      tableIsEnable(state.tableData, 'valid', data, (newArr) => {
        state.selectTableId = newArr
        !(data.valid) ? exampleTitleBatch('start') : exampleTitleBatch('stop')
      })
      break;

  }
}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(data, e, currentItem, state.tableHeader)
    state.tableHeader = currentData;
  } else {//全选/全取消
    state.tableHeader = data;
  }
}

//选择表格数据
const getSelectChange = (row) => {
  state.selectTableId = row.map(item => item.id)
}


</script>

<style lang="scss" scoped></style>
